<template>
  <div class="">
    <el-tooltip class="item" effect="dark" :content="contentTxt" placement="top">
      <span class="title default ">{{ title }}</span>
    </el-tooltip>

    <div style="display: inline-block;font-size: 12px;">
      <span v-if="ringNum*100 !==0" :style="{margin: '0 8px', marginRight: '4px',color:setColor(ringNum)}">{{ ringNum }}%</span>
      <span v-if="ringNum*100>0" class="el-icon-caret-top top "></span>
      <span v-if="ringNum*100===0" style="color:#39444e;margin: 0 8px;">持平</span>
      <span v-if="ringNum*100<0" class="el-icon-caret-bottom bottom "></span>
    </div>

  </div>
</template>
<script>
import {
  returnRing
} from '@/utils/index.js'

export default {
  name: '', // ·������
  props: {
    title: {
      type: String,
      default: '环比'
    },

    content: {
      type: String,
      default: '对比上个周期'
    },
    newVal: {
      type: Number,
      default: () => {
        return 0
      }
    },
    oldVal: {
      type: Number,
      default: () => {
        return 0
      }
    }

  },

  data() {
    return {

    }
  },
  computed: {
    contentTxt() {
      if (this.ringNum * 1 === 0) {
        return this.content + '持平'
      } else {
        const num = Math.abs(this.ringNum * 1)
        return `${this.content}${this.ringNum > 0 ? '上升' : '下降'}${num.toFixed(2)}%`
      }
    },
    ringNum() {
      const num = returnRing(this.newVal * 1, this.oldVal * 1) * 1
      return num.toFixed(0)
    }
  },
  watch: {
    // obj: { //�����Ķ���
    //   deep: true, //���ȼ�������Ϊ true
    //   // ������wacth��������firstName��������֮��������ȥִ��handler����
    //       immediate: true
    //   handler: function(newV, oldV) {
    //   }
    // }
  },
  // ������
  created() {},
  // ���غ�
  mounted() {

  },
  // ���ٺ�
  destroyed() {

  },

  // ����
  methods: {
    setColor(ringNum) {
      const num = ringNum * 100
      if (num > 1) {
        return '#E9716A'
      } else if (num === 1) {
        return '#39444E'
      } else {
        return '#24BEBE'
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import '~@/styles/variables.scss';

  .bottom {
    color: $mainColor1;
  }

  .top {
    color: #E9716A;
  }

  .title {
    color: rgb(172, 182, 194);
    font-size: 12px;
  }
</style>
